<template>
  <div class="right-container">
    <h3>Right 组件是否全选:{{ isAll }}</h3>
    <hr />
    <p>count 值：{{ count }}</p>
    <button @click="$store.commit('subtract', 50)" class="btn btn-warning">
      -50
    </button>
    <button @click="delBtn({ num: -10 })" class="btn btn-warning">+10</button>
    <button class="btn btn-danger" @click="subAsync({ num: -100 })">
      异步-100
    </button>
  </div>
</template>

<script>
// 按需导入和解构赋值很像
// 解构赋值;
// let obj = {
//   name: "周开心",
//   age: 18,
// };
// let { name, age } = obj;
// import {fn} from "b.js"
// export function fn(){}
// 按需导入必须得按需导出
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";

// console.log(mapState);
console.log(mapState(["count"])); //返回值是一个对象

// 小结:
// 1. mapState本质是一个函数,返回值是一个对象
// 2. mapState 需要传入一个数组,数组中定义要映射来的全局数据
// 3. mapState 会返回一个对象,对象中存储了全局数据对应的函数
// 4. 我们只需要使用...展开返回的结果即可得到映射过来的计算属性
// 5.mapState要写在计算属性中
export default {
  name: "Right",
  computed: {
    ...mapState(["count", "name"]),
    ...mapGetters(["isAll"]),
  },
  methods: {
    ...mapMutations(["delBtn"]),
    ...mapActions(["subAsync"]),
  },
};
</script>

<style>
</style>
